<template>
    <div>
        <Tabs v-model="tabID" type="card" closable @on-tab-remove="onTabDel" :animated="false" style="height:100%;">
            <Tab-pane v-for="tab in tabs" v-show="tab.isShow" :name="tab.id" :key="tab.id" :label="tab.label">
                <ReqTab :tab="tab"></ReqTab>
            </Tab-pane>
            <ButtonGroup slot="extra">
                <Button type="ghost" icon="plus-round" @click="onTabAdd" size="large"></Button>
            </ButtonGroup>
        </Tabs>
        <BackTop></BackTop>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import _ from 'lodash'
import moment from 'moment'
import ReqTab from './tab.vue'

@Component({
    components: {
        ReqTab
    }
})
export default class Index extends Vue {
    tabs: Req.TabModel[] = []
    tabID: string = ''

    mounted() {
        this.onTabAdd()
    }

    /**
     * 获取指定的tab对象
     */
    getTab(id: string): Req.TabModel | undefined {
        return _.find(this.tabs, function(v) {
            return v.id === id
        })
    }

    /**
     * 添加tab
     */
    onTabAdd() {
        let id =
            'tab' +
            moment()
                .valueOf()
                .toString()
        let tab: Req.TabModel = {
            id: id,
            isShow: true,
            label: ''
        }
        this.tabs.push(tab)
        this.tabID = id
    }

    /**
     * 移除tab
     */
    onTabDel(id: string) {
        _.remove(this.tabs, tab => {
            let has = tab.id === id
            if (has && this.tabs.length == 1) {
                this.onTabAdd()
            }

            return has
        })

        // let tab = this.getTab(id)
        // if (tab) {
        //     let c = _.countBy(this.tabs, (tab) => {
        //         return tab.isShow
        //     })
        //     if (c.true == 1) {
        //         //当前是最后一个tab，新建一个空白的替代
        //         this.onTabAdd()
        //     }

        //     // 只做隐藏，后续可做恢复列表
        //     tab.isShow = false
        // }
    }
}
</script>

